μνν μ¬μ©μ κ²½νμ μν PWA λ₯ λ§νΉ λ§μ€ν°νκΈ°. URLμ μ¬μ©νμ¬ μ± μνλ₯Ό 볡μνκ³ μ°Έμ¬λμ μ κ·Όμ±μ λμ΄λ λ°©λ²μ λ°°μ보μΈμ.
νλ‘κ·Έλ μλΈ μΉ μ± λ₯ λ§νΉ: URL κΈ°λ° μ± μν 볡μ
νλ‘κ·Έλ μλΈ μΉ μ±(PWA)μ μ°λ¦¬κ° μΉ μ ν리μΌμ΄μ μ κ²½ννλ λ°©μμ νμ νμ΅λλ€. PWAλ λ€μ΄ν°λΈ μ±μ μ΅κ³ μ κΈ°λ₯κ³Ό μΉμ μ κ·Όμ±μ κ²°ν©νμ¬ μ€νλΌμΈ κΈ°λ₯, νΈμ μλ¦Ό, κ·Έλ¦¬κ³ μνν μ¬μ©μ κ²½νμ μ 곡ν©λλ€. PWA μ¬μ©μ κ²½νμ ν₯μμν€λ μ€μν μΈ‘λ©΄ μ€ νλλ ν¨κ³Όμ μΈ μν 볡μμ ν΅ν λ₯ λ§νΉ ꡬνμ λλ€.
λ₯ λ§νΉμ΄λ 무μμΈκ°?
λ₯ λ§νΉμ URLμ μ¬μ©νμ¬ μ¬μ©μλ₯Ό λͺ¨λ°μΌ μ±μ΄λ PWA λ΄μ νΉμ μμΉλ μ½ν μΈ λ‘ μ§μ μλ΄νλ κΈ°λ₯μ λλ€. λ¨μν μ±μ ν νλ©΄μ μ¬λ λμ , λ₯ λ§ν¬λ μ¬μ©μλ₯Ό μ ν νμ΄μ§, μ€μ νλ©΄ λλ λ€λ₯Έ νΉμ μ½ν μΈ λ‘ μ§μ μ΄λμν¬ μ μμ΅λλ€. PWAμ λ§₯λ½μμ λ₯ λ§νΉμ URLμ΄ PWAλ₯Ό μ€νν λΏλ§ μλλΌ, μ¬μ©μκ° κΈ°λνλ 컨ν μ€νΈμ λ§κ² μ ν리μΌμ΄μ μ μνλ₯Ό 볡μνλ κ²μ μλ―Έν©λλ€.
PWAμμ λ₯ λ§νΉμ΄ μ€μν μ΄μ λ 무μμΈκ°?
λ₯ λ§νΉμ μ¬λ¬ κ°μ§ μ΄μ λ‘ νμμ μ λλ€:
- ν₯μλ μ¬μ©μ κ²½ν: μ¬μ©μλ μ 체 μ ν리μΌμ΄μ μ νμν νμ μμ΄ νΉμ μ½ν μΈ μ μ¦μ μ κ·Όν μ μμ΅λλ€. μ΄λ μ¬μ©μκ° μ¦κ°μ μΈ λ§μ‘±μ κΈ°λνλ μ€λλ μ λΉ λ₯Έ λμ§νΈ μΈμμμ λ§€μ° μ€μν©λλ€.
- μ°Έμ¬λ ν₯μ: λ§μΌν μΊ νμΈ, μμ λ―Έλμ΄ κ²μλ¬Ό λλ μ΄λ©μΌ λ΄μ€λ ν°μ λ₯ λ§ν¬λ μ¬μ©μλ₯Ό PWA λ΄μ κ΄λ ¨ μ½ν μΈ λ‘ μ§μ μ λνμ¬ μ°Έμ¬λμ μ νμ¨μ λμΌ μ μμ΅λλ€.
- μνν 곡μ : μ¬μ©μλ κ°λ¨ν URLμ ν΅ν΄ PWA λ΄μ νΉμ μ½ν μΈ λ₯Ό λ€λ₯Έ μ¬λκ³Ό μ½κ² 곡μ ν μ μμ΅λλ€. μμ μλ μμ μ PWA μΈμ€ν΄μ€ λ΄μμ λμΌν μ½ν μΈ μ μ§μ μ κ·Όν μ μμ΅λλ€.
- SEO μ΄μ : PWAλ κ²μ μμ§μ μν΄ μΈλ±μ±λλ©°, λ₯ λ§ν¬λ₯Ό ν΅ν΄ κ²μ μμ§μ΄ μ± λ΄μ νΉμ μ½ν μΈ λ₯Ό ν¬λ‘€λ§νκ³ μΈλ±μ±ν μ μμ΄ κ°μμ±κ³Ό κ²μ μμλ₯Ό ν₯μμν΅λλ€.
- μ± μν 보쑴: μ¬λ°λ₯΄κ² ꡬνλ λ₯ λ§νΉμ μ ν리μΌμ΄μ μ μνλ₯Ό 보쑴νμ¬, μ±μ΄ λ«νλ€κ° λ₯ λ§ν¬λ₯Ό ν΅ν΄ λ€μ μ΄λ¦° νμλ μ¬μ©μ κ²½νμ΄ μΌκ΄λκ² μ μ§λλλ‘ λ³΄μ₯ν©λλ€. μ΄λ 볡μ‘ν μ ν리μΌμ΄μ μ΄λ μν¬νλ‘μ°μ λ§€μ° μ€μν©λλ€.
μ± μνμ 볡μ μ΄ν΄νκΈ°
μ± μνλ PWAμ νμ¬ μνλ₯Ό μ μνλ λ°μ΄ν°λ₯Ό μλ―Έν©λλ€. μ¬κΈ°μλ λ€μμ΄ ν¬ν¨λ μ μμ΅λλ€:
- νμ¬ νμλκ³ μλ νμ΄μ§λ λ·°.
- μΌν μΉ΄νΈμ λ΄μ©λ¬Ό.
- μμμ μ λ ₯λ μ¬μ©μ λ°μ΄ν°.
- νμ΄μ§μ μ€ν¬λ‘€ μμΉ.
- μΈμ¦ μν.
μ± μνλ₯Ό 볡μνλ€λ κ²μ μ¬μ©μκ° λ₯ λ§ν¬λ₯Ό ν΅ν΄ PWAλ₯Ό μ΄μμ λ, μ ν리μΌμ΄μ μ΄ λ§ν¬κ° μμ±λμμ λμ λκ°μ μνλ‘ λμκ°λ κ²μ μλ―Έν©λλ€. μ΄λ λΆλλ½κ³ μ§κ΄μ μΈ μ¬μ©μ κ²½νμ μν΄ λ§€μ° μ€μν©λλ€. κΈ΄ μμμ μμ±νλ μ¬μ©μλ₯Ό μμν΄ λ³΄μΈμ. λ§μ½ μ μ ν μν 볡μ μμ΄ μ±μ λ«μλ€κ° λ€μ μ΄λ©΄, μ²μλΆν° λ€μ μμν΄μΌ ν κ²μ λλ€. μ± μν 볡μμ ν΅ν λ₯ λ§νΉμ μ΄ λ¬Έμ λ₯Ό ν΄κ²°ν©λλ€.
μ± μν 볡μμ ν΅ν PWA λ₯ λ§νΉ ꡬν λ°©λ²
μ± μν 볡μμ ν΅ν λ₯ λ§νΉ ꡬνμλ μ¬λ¬ λ¨κ³κ° ν¬ν¨λ©λλ€:
1. URL ꡬ쑰 μ μνκΈ°
μ μ μλ URL ꡬ쑰λ ν¨κ³Όμ μΈ λ₯ λ§νΉμ λ§€μ° μ€μν©λλ€. μ±μ μ½ν μΈ μ κΈ°λ₯μ΄ νΉμ URLμ μ΄λ»κ² λ§€νλλμ§ κ³ λ €νμΈμ. μ΄ν΄νκ³ μ μ§νκΈ° μ¬μ΄ μΌκ΄λκ³ λ Όλ¦¬μ μΈ κ΅¬μ‘°λ₯Ό μ¬μ©νμΈμ.
μμ:
μ μμκ±°λ PWAλ₯Ό μκ°ν΄ 보μΈμ. URL ꡬ쑰λ λ€μκ³Ό κ°μ μ μμ΅λλ€:
/(ννμ΄μ§)/products(λͺ¨λ μ ν λͺ©λ‘)/products/<product-id>(νΉμ μ ν νμ΄μ§, μ:/products/123)/cart(μΌν μΉ΄νΈ)/checkout(κ²°μ κ³Όμ )/profile(μ¬μ©μ νλ‘ν)
λ 볡μ‘ν μν κ΄λ¦¬λ₯Ό μν΄ μΏΌλ¦¬ νλΌλ―Έν°λ₯Ό μ¬μ©ν μ μμ΅λλ€:
/products?category=electronics("electronics" μΉ΄ν κ³ λ¦¬μ μ ν λͺ©λ‘)/search?q=keyword("keyword"μ λν κ²μ κ²°κ³Ό)
2. λ€μ΄μ€λ URL μ²λ¦¬νκΈ°
PWAλ λ€μ΄μ€λ URLμ μ²λ¦¬νκ³ μ± μνλ₯Ό 볡μνλ λ° νμν μ 보λ₯Ό μΆμΆν μ μμ΄μΌ ν©λλ€. μ΄λ μΌλ°μ μΌλ‘ JavaScriptλ₯Ό μ¬μ©νμ¬ URLμ νμ±νκ³ κ·Έμ λ°λΌ μ ν리μΌμ΄μ μ μνλ₯Ό μ λ°μ΄νΈνλ κ²μ ν¬ν¨ν©λλ€. λ€μ΄μ€λ URLμ μ²λ¦¬νλ μ£Όλ μμΉλ PWAμ λ©μΈ μ ν리μΌμ΄μ λ‘μ§μ΄λ λΌμ°ν° λ΄μ λλ€.
JavaScriptλ₯Ό μ¬μ©ν μμ:
function handleDeepLink() {
const url = new URL(window.location.href);
const path = url.pathname;
switch (path) {
case '/products':
// Display the list of products
displayProducts();
break;
case '/cart':
// Display the shopping cart
displayCart();
break;
default:
if (path.startsWith('/products/')) {
const productId = path.split('/').pop();
// Display the details of the specified product
displayProductDetails(productId);
} else {
// Display the home page
displayHomePage();
}
}
// Handle query parameters
const category = url.searchParams.get('category');
if (category) {
// Filter products by category
filterProductsByCategory(category);
}
const searchQuery = url.searchParams.get('q');
if (searchQuery) {
// Perform a search
performSearch(searchQuery);
}
}
// Call handleDeepLink when the app loads
handleDeepLink();
// Listen for changes in the URL (using the History API)
window.addEventListener('popstate', handleDeepLink);
μ΄ μμλ URLμ νμ±νκ³ κ²½λ‘ λ° μΏΌλ¦¬ νλΌλ―Έν°λ₯Ό κΈ°λ°μΌλ‘ μ±μ μνλ₯Ό μ
λ°μ΄νΈνλ λ°©λ²μ 보μ¬μ€λλ€. handleDeepLink ν¨μλ μ±μ΄ λ‘λλ λμ URLμ΄ λ³κ²½λ λλ§λ€(μ± λ΄ νμμΌλ‘ μΈν΄) νΈμΆλ©λλ€. `popstate` μ΄λ²€νΈ 리μ€λμ μ¬μ©μ μ£Όλͺ©νμΈμ. μ΄λ PWA λ΄μμ λΈλΌμ°μ μ λ€λ‘/μμΌλ‘ λ²νΌ νμμ μ²λ¦¬νλ λ° νμμ μ
λλ€.
3. μ± μν μ μ₯ λ° λ³΅μνκΈ°
μ± μνλ₯Ό ν¨κ³Όμ μΌλ‘ 볡μνλ €λ©΄, νμν λ°μ΄ν°λ₯Ό μ μ₯νκ³ λ₯ λ§ν¬λ₯Ό ν΅ν΄ μ±μ΄ λ€μ μ΄λ¦΄ λ μ΄λ₯Ό κ²μνλ λ©μ»€λμ¦μ΄ νμν©λλ€. μ΄λ₯Ό μν΄ μ¬λ¬ κ°μ§ λ°©λ²μ μ¬μ©ν μ μμΌλ©°, κ°κ° μ₯λ¨μ μ΄ μμ΅λλ€.
λ‘컬 μ€ν 리μ§
λ‘컬 μ€ν 리μ§λ μ¬μ©μ λΈλΌμ°μ μ μλμ λ°μ΄ν°λ₯Ό μ μ₯νλ κ°λ¨νκ³ νΈλ¦¬ν λ°©λ²μ λλ€. μ¬μ©μ κΈ°λ³Έ μ€μ , μΈμ¦ ν ν° λλ μμ μΌν μΉ΄νΈμ λ΄μ©λ¬Όκ³Ό κ°μ κ²μ μ μ₯νλ λ° μ΄μμ μ λλ€. κ·Έλ¬λ λ‘컬 μ€ν 리μ§λ μ μ₯ μ©λμ΄ μ νλμ΄ μμΌλ©° ν¬κ±°λ λ―Όκ°ν λ°μ΄ν°μλ μ¬μ©ν΄μλ μ λ©λλ€.
λ‘컬 μ€ν 리μ§λ₯Ό μ¬μ©ν μμ:
// Store the current product ID
localStorage.setItem('currentProductId', productId);
// Restore the product ID
const currentProductId = localStorage.getItem('currentProductId');
if (currentProductId) {
displayProductDetails(currentProductId);
}
μΈμ μ€ν 리μ§
μΈμ μ€ν 리μ§λ λ‘컬 μ€ν 리μ§μ μ μ¬νμ§λ§ λ°μ΄ν°λ μ¬μ©μμ μΈμ κΈ°κ° λμλ§ μ μ₯λ©λλ€. μ¬μ©μκ° λΈλΌμ°μ νμ΄λ μ°½μ λ«μΌλ©΄ λ°μ΄ν°λ μλμΌλ‘ μμ λ©λλ€. μΈμ μ€ν 리μ§λ μ¬λ¬ μΈμ μ κ±Έμ³ νμνμ§ μμ μμ λ°μ΄ν°λ₯Ό μ μ₯νλ λ° μ ν©ν©λλ€.
μΏ ν€
μΏ ν€λ μ¬μ©μ μ»΄ν¨ν°μ μ μ₯λλ μμ ν μ€νΈ νμΌμ λλ€. μ’ μ’ μ¬μ©μ νλμ μΆμ νκ³ κΈ°λ³Έ μ€μ μ μ μ₯νλ λ° μ¬μ©λ©λλ€. κ·Έλ¬λ μΏ ν€λ μμ μ μ₯ μ©λ λ° μ μ¬μ μΈ κ°μΈ μ 보 λ³΄νΈ λ¬Έμ λ± μ¬λ¬ μ ν μ¬νμ΄ μμ΅λλ€. μ΅μ PWAλ μ’ μ’ μΏ ν€λ³΄λ€ λ‘컬 μ€ν 리μ§λ IndexedDBλ₯Ό μ νΈν©λλ€.
IndexedDB
IndexedDBλ λ‘컬 μ€ν 리μ§λ μΏ ν€λ³΄λ€ λ κ°λ ₯νκ³ μ μ°ν μ€ν λ¦¬μ§ μ루μ μ λλ€. μ¬μ©μμ λΈλΌμ°μ μ λλμ ꡬ쑰νλ λ°μ΄ν°λ₯Ό μ μ₯ν μ μλ NoSQL λ°μ΄ν°λ² μ΄μ€μ λλ€. IndexedDBλ ν° μΌν μΉ΄νΈμ λ΄μ©λ¬Ό, μ¬μ©μ νλ‘ν λλ μ€νλΌμΈ λ°μ΄ν°μ κ°μ 볡μ‘ν μ± μνλ₯Ό μ μ₯νλ λ° μ΄μμ μ λλ€.
IndexedDBλ₯Ό μ¬μ©ν μμ:
// Open a database
const request = indexedDB.open('myDatabase', 1);
request.onerror = function(event) {
console.error('Error opening database:', event);
};
request.onsuccess = function(event) {
const db = event.target.result;
// Store the current product details
const transaction = db.transaction(['products'], 'readwrite');
const objectStore = transaction.objectStore('products');
const addRequest = objectStore.put({ id: productId, name: productName, price: productPrice });
addRequest.onsuccess = function(event) {
console.log('Product added to database');
};
// Retrieve the product details
const getRequest = objectStore.get(productId);
getRequest.onsuccess = function(event) {
const product = event.target.result;
if (product) {
displayProductDetails(product.id, product.name, product.price);
}
};
};
request.onupgradeneeded = function(event) {
const db = event.target.result;
const objectStore = db.createObjectStore('products', { keyPath: 'id' });
};
μ΄ μμλ IndexedDB λ°μ΄ν°λ² μ΄μ€λ₯Ό μ΄κ³ , μ ν μΈλΆ μ 보λ₯Ό μ μ₯νκ³ , λμ€μ κ²μνλ λ°©λ²μ 보μ¬μ€λλ€. onupgradeneeded μ΄λ²€νΈλ κ°μ²΄ μ μ₯μκ° μμ§ μ‘΄μ¬νμ§ μμ κ²½μ° μμ±νλ λ° μ¬μ©λ©λλ€.
μλΉμ€ μ컀μ μΊμ±
μλΉμ€ μ컀λ λ€νΈμν¬ μμ²μ κ°λ‘μ±κ³ μΊμλ μλ΅μ μ 곡νμ¬ PWAκ° μ€νλΌμΈ λλ μ°κ²°μ΄ μ νλ μνμμλ μλνλλ‘ ν μ μμ΅λλ€. λν μ± μνλ₯Ό μ μ₯νκ³ λ³΅μνλ λ°μλ μ¬μ©λ μ μμ΅λλ€. νμν λ°μ΄ν°λ₯Ό μΊμ±ν¨μΌλ‘μ¨ μ¬μ©μκ° μ€νλΌμΈμΌ λμλ μ±μ΄ κ³μ μλνλλ‘ λ³΄μ₯ν μ μμ΅λλ€.
4. λ€μν μλλ¦¬μ€ μ²λ¦¬νκΈ°
μ± μν 볡μμ ν΅ν λ₯ λ§νΉμ ꡬνν λλ λ€μν μλ리μ€λ₯Ό μννκ² μ²λ¦¬νλ κ²μ΄ μ€μν©λλ€:
- μ±μ΄ μ€μΉλμ§ μμ κ²½μ°: μ¬μ©μκ° λ₯ λ§ν¬λ₯Ό ν΄λ¦νμ§λ§ PWAκ° μ€μΉλμ§ μμ κ²½μ°, PWA μ€μΉ νμ΄μ§(μ: μ± μ€ν μ΄ λλ μ€μΉ ν둬ννΈκ° μλ PWA ννμ΄μ§)λ‘ λ¦¬λλ μ ν΄μΌ ν©λλ€. μ§μ°λ λ₯ λ§νΉ(μλ μ°Έμ‘°) μ¬μ©μ κ³ λ €νμΈμ.
- μ±μ΄ μ΄λ―Έ μ€ν μ€μΈ κ²½μ°: PWAκ° μ΄λ―Έ λ°±κ·ΈλΌμ΄λμμ μ€ν μ€μΈ κ²½μ°, ν¬κ·ΈλΌμ΄λλ‘ κ°μ Έμ μ± μνλ₯Ό 볡μν΄μΌ ν©λλ€. μ΄λ₯Ό μν΄ μλΉμ€ μ컀μμ `clients.matchAll()` λ©μλλ₯Ό μ¬μ©νμ¬ κΈ°μ‘΄ PWA μΈμ€ν΄μ€λ₯Ό μ°ΎμμΌ ν μ μμ΅λλ€.
- μ ν¨νμ§ μκ±°λ μ€λλ λ₯ λ§ν¬: λ₯ λ§ν¬κ° μ ν¨νμ§ μκ±°λ μ€λλ κ²½μ°, μ¬μ©μμκ² μ€λ₯ λ©μμ§λ₯Ό νμνκ³ PWA λ΄μ κ΄λ ¨ νμ΄μ§(μ: ννμ΄μ§ λλ κ²μ κ²°κ³Ό νμ΄μ§)λ‘ λ¦¬λλ μ ν΄μΌ ν©λλ€.
- κΆν: PWAλ μ’ μ’ μ¬μ©μ κΆν(μμΉ, μΉ΄λ©λΌ, μλ¦Ό)μ μꡬν©λλ€. κΆν μμ²μ μννκ² μ²λ¦¬νκ³ λ₯ λ§ν¬μ κ΄λ ¨λ νΉμ κΈ°λ₯μ μ νμνμ§ μ€λͺ νμΈμ.
κ³ κΈ λ₯ λ§νΉ κΈ°μ
κΈ°λ³Έ μ¬νμ λμ΄, PWAμ λ₯ λ§νΉ κΈ°λ₯μ ν₯μμν€κΈ° μν λͺ κ°μ§ κ³ κΈ κΈ°μ μ λ€μκ³Ό κ°μ΅λλ€:
μ§μ°λ λ₯ λ§νΉ(Deferred Deep Linking)
μ§μ°λ λ₯ λ§νΉμ μ¬μ©νλ©΄ PWAλ₯Ό μ€μΉνκΈ° *μ *μ λ₯ λ§ν¬λ₯Ό ν΄λ¦ν μ¬μ©μλ₯Ό μΆμ ν μ μμ΅λλ€. μ¬μ©μκ° PWAλ₯Ό μ²μ μ€μΉνκ³ μ΄ λ, μ§μ°λ λ₯ λ§ν¬λ₯Ό κ²μνμ¬ μλλ μ½ν μΈ λ‘ μλ΄ν μ μμ΅λλ€. μ΄λ λ§μΌν μΊ νμΈμ νΉν μ μ©ν©λλ€.
μλ λ°©μ:
- μ¬μ©μκ° λ₯ λ§ν¬(μ: κ΄κ³ )λ₯Ό ν΄λ¦ν©λλ€.
- PWAκ° μ€μΉλμ§ μμ κ²½μ°, μ± μ€ν μ΄ λλ PWA ννμ΄μ§λ‘ 리λλ μ λ©λλ€.
- μΆμ μλΉμ€κ° λ₯ λ§ν¬ μ 보(μ: μΏ ν€ λλ λ‘컬 μ€ν 리μ§)λ₯Ό μ μ₯ν©λλ€.
- μ¬μ©μκ° PWAλ₯Ό μ€μΉνκ³ μ΄λ©΄, μ±μ μ μ₯λ λ₯ λ§ν¬ μ 보λ₯Ό κ²μν©λλ€.
- μ±μ μ¬μ©μλ₯Ό μλλ μ½ν μΈ λ‘ μλ΄ν©λλ€.
μ¬λ¬ νμ¬ μλΉμ€μμ μ§μ°λ λ₯ λ§νΉ μ루μ μ μ 곡ν©λλ€.
μΉ μ± λ§€λνμ€νΈ μ¬μ©νκΈ°
μΉ μ± λ§€λνμ€νΈ(manifest.json)λ λΈλΌμ°μ μ μ΄λ¦, μμ΄μ½, μμ URL λ± PWAμ λν μ 보λ₯Ό μ 곡ν©λλ€. λ§€λνμ€νΈμ `start_url` μμ±μ μ¬μ©νμ¬ PWAκ° ν νλ©΄μμ μ€νλ λ μ΄λ €μΌ νλ URLμ μ§μ ν μ μμ΅λλ€. μ΄λ₯Ό μ¬μ©νμ¬ κΈ°λ³Έμ μΈ λ₯ λ§νΉ κΈ°λ₯μ ꡬνν μ μμ΅λλ€.
μμ:
{
"name": "My PWA",
"short_name": "PWA",
"start_url": "/products/123",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#000000",
"icons": [
{
"src": "/icon.png",
"sizes": "192x192",
"type": "image/png"
}
]
}
μ΄ μμμμ PWAκ° ν νλ©΄μμ μ€νλλ©΄ μλμΌλ‘ /products/123 νμ΄μ§λ‘ μ΄λν©λλ€.
λ₯ λ§ν¬ ν μ€νΈ λ° λλ²κΉ
λ₯ λ§ν¬ ν μ€νΈ λ° λλ²κΉ μ νΉν λͺ¨λ°μΌ μ₯μΉμμ μ΄λ €μΈ μ μμ΅λλ€. λ€μμ λͺ κ°μ§ νμ λλ€:
- URL λ¨μΆκΈ° μ¬μ©: URL λ¨μΆκΈ°λ λ₯ λ§ν¬λ₯Ό λ μ½κ² 곡μ νκ³ ν μ€νΈν μ μκ² ν΄μ€λλ€.
- λ€λ₯Έ μ₯μΉ λ° λΈλΌμ°μ μμ ν μ€νΈ: λ₯ λ§ν¬κ° λ€λ₯Έ νλ«νΌμμ μΌκ΄λκ² μλνλμ§ νμΈνμΈμ.
- λΈλΌμ°μ κ°λ°μ λꡬ μ¬μ©: λΈλΌμ°μ μ κ°λ°μ λꡬλ λ€νΈμν¬ μμ², λ‘컬 μ€ν λ¦¬μ§ λ° IndexedDBλ₯Ό κ²μ¬νμ¬ λ₯ λ§νΉ λ¬Έμ λ₯Ό μ§λ¨νλ λ° λμμ΄ λ μ μμ΅λλ€.
- λ₯ λ§ν¬ ν μ€νΈ λꡬ μ¬μ©: μ¬λ¬ μ¨λΌμΈ λꡬμ λͺ¨λ°μΌ μ±μ΄ λ₯ λ§ν¬λ₯Ό ν μ€νΈνκ³ μ¬λ°λ₯΄κ² μλνλμ§ νμΈνλ λ° λμμ΄ λ μ μμ΅λλ€.
- JavaScript μ½λμ μ€λ¨μ μ€μ : JavaScriptλ₯Ό ν΅ν λλ²κΉ μ λ‘μ§μ΄ κ²¬κ³ νμ§ νμΈνλ λ° ν΅μ¬μ λλ€.
PWA λ₯ λ§νΉμ μν λͺ¨λ² μ¬λ‘
PWA λ₯ λ§νΉμ ꡬνν λ λ°λΌμΌ ν λͺ κ°μ§ λͺ¨λ² μ¬λ‘λ λ€μκ³Ό κ°μ΅λλ€:
- μΌκ΄λκ³ λ Όλ¦¬μ μΈ URL ꡬ쑰λ₯Ό μ¬μ©νμΈμ.
- λ€μ΄μ€λ URLμ μννκ² μ²λ¦¬νμΈμ.
- μ± μνλ₯Ό ν¨κ³Όμ μΌλ‘ μ μ₯νκ³ λ³΅μνμΈμ.
- λ€μν μλ리μ€(μ± λ―Έμ€μΉ, μ ν¨νμ§ μμ λ₯ λ§ν¬ λ±)λ₯Ό μ²λ¦¬νμΈμ.
- λ₯ λ§ν¬λ₯Ό μ² μ ν ν μ€νΈνκ³ λλ²κΉ νμΈμ.
- λ§μΌν μΊ νμΈμ μν΄ μ§μ°λ λ₯ λ§νΉ μ¬μ©μ κ³ λ €νμΈμ.
- μ ν¨νμ§ μμ λ₯ λ§ν¬μ λν λ체 λ©μ»€λμ¦(μ: ννμ΄μ§λ‘ 리λλ μ )μ μ 곡νμΈμ.
- λ₯ λ§ν¬κ° SEO μΉνμ μΈμ§ νμΈνμΈμ.
- μ¬μ©μ κ²½νκ³Ό μ κ·Όμ±μ μ°μ μνμΈμ.
- ν₯ν μ μ§ κ΄λ¦¬λ₯Ό μν΄ λ₯ λ§νΉ ꡬνμ λ¬ΈμννμΈμ.
κ΅μ ν κ³ λ €μ¬ν
κΈλ‘λ² μ¬μ©μλ₯Ό μν PWAλ₯Ό κ°λ°ν λ λ₯ λ§νΉκ³Ό κ΄λ ¨λ λ€μ κ΅μ ν μΈ‘λ©΄μ κ³ λ €νμΈμ:
- URL νμ§ν: PWAκ° μ¬λ¬ μΈμ΄λ₯Ό μ§μνλ κ²½μ° URLμ΄ κ·Έμ λ§κ² νμ§νλμλμ§ νμΈνμΈμ. μλ₯Ό λ€μ΄, λ€λ₯Έ μΈμ΄μ λν΄ λ€λ₯Έ νμ λλ©μΈμ΄λ URL κ²½λ‘λ₯Ό μ¬μ©ν μ μμ΅λλ€(μ:
/en/products/123,/ko/products/123). - λ μ§ λ° μκ° νμ: μ± μνμ λ μ§λ μκ°μ΄ ν¬ν¨λ κ²½μ°, μ¬μ©μμ λ‘μΌμΌμ μ ν©ν νμμΌλ‘ μ μ₯λκ³ λ³΅μλλμ§ νμΈνμΈμ. λ μ§ λ° μκ° μμ μ§μ μ μν΄ κ΅μ ν API(Intl) μ¬μ©μ κ³ λ €νμΈμ.
- ν΅ν νμ: μ± μνμ ν΅ν κ°μ΄ ν¬ν¨λ κ²½μ°, μ¬μ©μμ λ‘μΌμΌμ λ§λ μ¬λ°λ₯Έ ν΅ν λ° νμμΌλ‘ νμλλμ§ νμΈνμΈμ. μ΄ κ²½μ°μλ Intl APIκ° μ μ©ν μ μμ΅λλ€.
- ν μ€νΈ λ°©ν₯: PWAκ° μ€λ₯Έμͺ½μμ μΌμͺ½μΌλ‘ μ°λ(RTL) μΈμ΄λ₯Ό μ§μνλ κ²½μ°, λ₯ λ§ν¬κ° ν μ€νΈ λ°©ν₯κ³Ό λ μ΄μμμ μ¬λ°λ₯΄κ² μ²λ¦¬νλμ§ νμΈνμΈμ.
- λ¬Έμ μΈμ½λ©: URLκ³Ό μ± μνκ° PWAκ° μ§μνλ λͺ¨λ μΈμ΄λ₯Ό μ§μνλ λ¬Έμ μΈμ½λ©(μ: UTF-8)μ μ¬μ©νλμ§ νμΈνμΈμ.
- λ€λ₯Έ λ‘μΌμΌλ‘ ν μ€νΈ: λͺ¨λ μΈμ΄μμ μ¬λ°λ₯΄κ² μλνλμ§ νμΈνκΈ° μν΄ λ€λ₯Έ λ‘μΌμΌλ‘ λ₯ λ§νΉ ꡬνμ μ² μ ν ν μ€νΈνμΈμ.
μ€μ μ¬λ‘
λ§μ μ±κ³΅μ μΈ PWAκ° λ₯ λ§νΉμ νμ©νμ¬ μ¬μ©μ κ²½νμ ν₯μμν΅λλ€. λͺ κ°μ§ μλ λ€μκ³Ό κ°μ΅λλ€:
- Twitter PWA: νΈμ λ§ν¬λ₯Ό 곡μ νλ©΄ Twitter PWA λ΄μμ ν΄λΉ νΉμ νΈμμΌλ‘ λ°λ‘ μ΄λν©λλ€.
- Pinterest PWA: ν λ§ν¬λ₯Ό ν΄λ¦νλ©΄ Pinterest PWA λ΄μμ ν΄λΉ νμΌλ‘ λ°λ‘ μ΄λν©λλ€.
- Spotify PWA: λ Έλλ νλ μ΄λ¦¬μ€νΈ λ§ν¬λ₯Ό 곡μ νλ©΄ Spotify PWA λ΄μμ ν΄λΉ μ½ν μΈ λ‘ λ°λ‘ μ΄λν©λλ€.
- AliExpress PWA: AliExpressμμ νΉμ μ νμ λν λ§ν¬λ₯Ό ν΄λ¦νλ©΄ μ΄μ μ PWAκ° μ΄λ € μμλμ§ μ¬λΆμ κ΄κ³μμ΄ PWA λ΄μμ μ§μ μ ν νμ΄μ§κ° μ΄λ¦½λλ€.
μ΄λ¬ν μλ μ°Έμ¬λ₯Ό μ λνκ³ μνν μ¬μ©μ κ²½νμ μ 곡νλ λ₯ λ§νΉμ νμ 보μ¬μ€λλ€.
PWA λ₯ λ§νΉμ λ―Έλ
PWA λ₯ λ§νΉμ μλ‘μ΄ κΈ°μ κ³Ό λͺ¨λ² μ¬λ‘κ° κ³μν΄μ λ±μ₯νλ λμμμ΄ λ°μ νλ λΆμΌμ λλ€. PWAκ° λμ± μ κ΅νκ³ κ°λ ₯ν΄μ§μ λ°λΌ, λ₯ λ§νΉμ λ§€λ ₯μ μΈ μ¬μ©μ κ²½νμ μ 곡νλ λ° λμ± μ€μν΄μ§ κ²μ λλ€. μΉ νμ€μ μ±ν μ¦κ°μ λ₯ λ§νΉ APIμ νμ€νλ λ₯ λ§νΉ ꡬνμ λμ± λ¨μννκ³ κ°λ°μλ€μ΄ λ μ½κ² μ κ·Όν μ μκ² λ§λ€ κ²μ λλ€.
κ²°λ‘
λ₯ λ§νΉμ νλ‘κ·Έλ μλΈ μΉ μ±μ μ€μν κΈ°λ₯μΌλ‘, κ°λ°μκ° μννκ³ λ§€λ ₯μ μΈ μ¬μ©μ κ²½νμ λ§λ€ μ μκ² ν΄μ€λλ€. URL κΈ°λ° μ± μν 볡μμ ꡬνν¨μΌλ‘μ¨, μ¬μ©μκ° λ§μΌν μΊ νμΈ, μμ λ―Έλμ΄ κ²μλ¬Ό λλ κ°λ¨ν 곡μ λ§ν¬μμ μ€λ κ΄κ³μμ΄ PWA λ΄μ νΉμ μ½ν μΈ μ μ¦μ μ‘μΈμ€ν μ μλλ‘ λ³΄μ₯ν μ μμ΅λλ€. μ΄ κ°μ΄λμ μ€λͺ λ λͺ¨λ² μ¬λ‘λ₯Ό λ°λ₯΄λ©΄, PWAμ μ λ°μ μΈ μ¬μ©μ κ²½νμ ν₯μμν€κ³ μ°Έμ¬λ₯Ό μ λν κ°λ ₯νκ³ μ¬μ©μ μΉνμ μΈ λ₯ λ§νΉ ꡬνμ λ§λ€ μ μμ΅λλ€. κΈλ‘λ² κΈ°μ μμ κ°μΈ κ°λ°μμ μ΄λ₯΄κΈ°κΉμ§, λ₯ λ§νΉμ νλ PWA νκ²½μμ νμμ μΈ λꡬμ λλ€. μ λλ‘ κ΅¬νλ λ₯ λ§νΉμ μ¬μ©μ μ±ν, μ°Έμ¬ λ° μ λ°μ μΈ μ± μ±κ³΅μ μμ΄ κ²μ 체μΈμ κ° λ μ μμ΅λλ€. λ°λΌμ μ΄ κΈ°μ μ λ§μ€ν°νλ λ° μκ°κ³Ό μμμ ν¬μνλ κ²μ λͺ¨λ PWA κ°λ°μμκ² κ°μΉ μλ λ Έλ ₯μ λλ€.